<template>
	<div id="regDiv">
		<p class="reg_p"><router-link to="/me"><span @click="back()"><</span></router-link>用户注册 </p>
		<div class="first" >
			
				<input type="text" name="unmane" placeholder="请输入手机号码"><span class="obtin" @click="obtain()">获取验证码</span><span class="num1">60</span>
					<input type="password" name="pwd" placeholder="请输入验证码">	<br />
				<button class="btn" @click="obtain1()">注册</button>
					
					
				</div>
	</div>
</template>
<script>
	export default {
		name:'About',
		methods:{
			back:function(){
				$('#list').show()
			},
			obtain:function(){
				$('.obtin').hide()
				$('.num1').show()
				var num = 60;
				var time = setInterval(function(){
					num--;
					if(num<=0){
						clearInterval(time);
						$('.num1').hide()
						$('.obtin').show()
					}
					$('.num1').html(num)
				},1000)
			},
			obtain1:function(){
				
			}
		}
		
	}
</script>
<style scoped>

	.reg_p{
			width: 100%;
			line-height: 4rem;
			background: red;
			color: white;
			text-align: center;
			font-size: 2rem;
	}
	.reg_p a{
		color: white;
		font-size:3rem;
	}
	.reg_p span{
		float: left;
		margin-left: 5%;
	}
	input{
			width: 90%;
			/*margin-left: 2.5%;*/
			height: 4rem;
			/*margin-top: 3rem;*/
			border:0;
		}
		.obtin{
			/*margin-right: 5rem;*/
			position: absolute;
			float: right;
			display: block;
			top:5.5rem;
			right: 2rem;
			/*width: 8rem;*/
			z-index: 999;
			background: red;
			padding: .5rem;
			color: white;
			font-size: 1.6rem;
			border-radius: .5rem
		}
		.num1{
			/*width: 2rem;*/
			/*line-height: 2rem;*/
			text-align: center;
			background: red;
			color: white;
			position: absolute;
			top: 5.5rem;
			right: 2rem;
			display: none;
			padding: 0.3rem;
		}
		.btn{
			width:  90%;margin-left: 5%;
			background-color: red;
			line-height: 3rem;
			border-radius: 0.5rem;
			color: white;
			margin-top: 3rem;
			text-align: center;
		}
</style>